import React, { useEffect, useState, useRef } from 'react'
import styles from './index.module.less'
import G6 from '../register'
import BIJI from '../register/img/biji.png'
import BIJIA from '../register/img/biji-active.png'
import classNames from 'classnames'

const ProjectRoute = () => {
	const inputEditRef = useRef()

	const [graph, setGraph] = useState(null) // 设置画布
	const [editFlag, setEditFlag] = useState(false)
	const [editValue, setEditValue] = useState('')
	const [targetId, setTargetId] = useState(null)

	const textShow = () => {
		setEditFlag(!editFlag)
	}

	const textChange = (event) => {
		const val = event.target.value
		setEditValue(val)
	}

	const baseX = 50
	const baseY = 70
	const diffHeight = 170
	const diffWidth = 150
	const firstW = 160

	useEffect(() => {
		const list = new Array(12).fill({})
		const nodeList = []
		const edgeList = []
		list.forEach((item, index) => {
			const last = index % 5 || 5
			const floor = Math.floor(index / 5)
			let t = {
				id: `textCircle${index}`,
				x: undefined,
				y: undefined,
				label: '',
				type: 'textCircle',
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			}
			if (index === 0) {
				t.x = baseX
				t.y = baseY
				nodeList.push(t)
				return
			}
			if (floor % 2 === 1 && last === 5) {
				t.x = firstW + (last - 1) * diffWidth
				t.y = baseY + (floor - 1) * diffHeight
				nodeList.push(t)
				return
			}

			if (floor % 2 === 0 && last === 5) {
				t.x = firstW + (5 - last) * diffWidth
				t.y = baseY + floor * diffHeight
				nodeList.push(t)
				return
			}

			if (floor % 2 === 0) {
				t.x = firstW + (last - 1) * diffWidth
				t.y = baseY + floor * diffHeight
				nodeList.push(t)
				return
			}

			if (floor % 2 === 1) {
				t.x = firstW + (5 - last) * diffWidth
				t.y = baseY + floor * diffHeight
				nodeList.push(t)
			}
		})

		list.forEach((item, index) => {
			let t = {}
			if (index === 0) return
			if (index === list.length - 1) return
			const last = index % 5 || 5
			const floor = Math.floor(index / 5)

			if (floor % 2 === 1 && last === 5) {
				t.type = 'textArcEdgeR'
				t.sourceAnchor = 2
				t.targetAnchor = 3
				t.path = 'M -3, 0 L 9, 0 L 4, -10 Z'
				edgeList.push(t)
				return
			}

			if (floor % 2 === 0 && last === 5) {
				t.type = 'textArcEdgeL'
				t.sourceAnchor = 2
				t.targetAnchor = 2
				t.path = 'M 0,0 L 10,5 L 10,-5 Z'
				edgeList.push(t)
				return
			}

			if (floor % 2 === 0) {
				t.type = 'textEdgeR'
				t.sourceAnchor = 2
				t.targetAnchor = 4
				t.path = 'M 0,0 L 10,5 L 10,-5 Z'
			}
			if (floor % 2 === 1) {
				t.type = 'textEdgeL'
				t.sourceAnchor = 2
				t.targetAnchor = 3
				t.path = 'M 0,0 L 10,5 L 10,-5 Z'
			}
			edgeList.push(t)
		})

		console.log(nodeList)
		console.log(edgeList)
	}, [])

	// 根据官网例子的接口获取的数据
	const initData = {
		nodes: [
			{
				id: 'textCircle0',
				x: baseX,
				y: baseY,
				label: '',
				type: 'textCircle',
				start: '计划结束',
				end: '实际结束',
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle1',
				x: firstW,
				y: baseY,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '项目启动',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle2',
				x: firstW + diffWidth,
				y: baseY,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '需求评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle3',
				x: firstW + 2 * diffWidth,
				y: baseY,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '方案评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle4',
				x: firstW + 3 * diffWidth,
				y: baseY,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '需求评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle5',
				x: firstW + 4 * diffWidth,
				y: baseY,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '方案评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle6',
				x: firstW + 4 * diffWidth,
				y: baseY + diffHeight,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '方案评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle7',
				x: firstW + 3 * diffWidth,
				y: baseY + diffHeight,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '方案评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle8',
				x: firstW + 2 * diffWidth,
				y: baseY + diffHeight,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '方案评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle9',
				x: firstW + diffWidth,
				y: baseY + diffHeight,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '方案评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle10',
				x: firstW,
				y: baseY + diffHeight,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '方案评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle11',
				x: firstW,
				y: baseY + 2 * diffHeight,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '方案评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
			{
				id: 'textCircle12',
				x: firstW + diffWidth,
				y: baseY + 2 * diffHeight,
				fill: '#fff',
				stroke: '#828282',
				type: 'textCircle',
				label: '方案评审',
				start: '2020.06.01',
				end: '2020.06.08',
				finished: false,
				anchorPoints: [
					[0.5, 0],
					[0.5, 1],
					[0, 0.5],
					[1, 0.5],
				],
				r: 24,
				labelCfg: {
					style: {
						fontSize: 14,
						fill: '#000',
					},
				},
			},
		],
		edges: [
			{
				source: 'textCircle1',
				target: 'textCircle2',
				type: 'textEdgeR',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 4,
				style: {
					endArrow: {
						path: 'M 0,0 L 10,5 L 10,-5 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJI,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle2',
				target: 'textCircle3',
				type: 'textEdgeR',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 4,
				style: {
					endArrow: {
						path: 'M 0,0 L 10,5 L 10,-5 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle3',
				target: 'textCircle4',
				type: 'textEdgeR',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 4,
				style: {
					endArrow: {
						path: 'M 0,0 L 10,5 L 10,-5 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle4',
				target: 'textCircle5',
				type: 'textEdgeR',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 4,
				style: {
					endArrow: {
						path: 'M 0,0 L 10,5 L 10,-5 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle5',
				target: 'textCircle6',
				type: 'textArcEdgeR',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 3,
				style: {
					endArrow: {
						path: 'M -3, 0 L 9, 0 L 4, -10 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle6',
				target: 'textCircle7',
				type: 'textEdgeL',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 3,
				style: {
					endArrow: {
						path: 'M 0,0 L 10,5 L 10,-5 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle7',
				target: 'textCircle8',
				type: 'textEdgeL',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 3,
				style: {
					endArrow: {
						path: 'M 0,0 L 10,5 L 10,-5 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle8',
				target: 'textCircle9',
				type: 'textEdgeL',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 3,
				style: {
					endArrow: {
						path: 'M 0,0 L 10,5 L 10,-5 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle9',
				target: 'textCircle10',
				type: 'textEdgeL',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 3,
				style: {
					endArrow: {
						path: 'M 0,0 L 10,5 L 10,-5 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle10',
				target: 'textCircle11',
				type: 'textArcEdgeL',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 2,
				style: {
					endArrow: {
						path: 'M 10,-1 L 0,4 L 0,-6 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
			{
				source: 'textCircle11',
				target: 'textCircle12',
				type: 'textEdgeR',
				// 该边连入 source 点的第 0 个 anchorPoint，
				sourceAnchor: 2,
				// 该边连入 target 点的第 0 个 anchorPoint，
				targetAnchor: 4,
				style: {
					endArrow: {
						path: 'M 0,0 L 10,5 L 10,-5 Z',
						fill: '#f59a23',
						stroke: '#f59a23',
					},
					stroke: '#f59a23',
					lineWidth: 2,
				},
				img: BIJIA,
				iconCfg: {
					width: 24,
					height: 24,
				},
			},
		],
	}

	const [data, setData] = useState(initData)

	// 初始化画布
	const setGraphObj = () => {
		const graph = new G6.Graph({
			container: 'container',
			width: 950,
			height: 660,
			modes: {},
			edgeStateStyles: {},
		})

		graph.on('edge:click', (event) => {
			const item = event.item
			const model = item.getModel()
			console.log(item)
			console.log(model)
		})

		graph.on('edge:mouseenter', (event) => {
			const item = event.item
			const model = item.getModel()

			model.style.cursor = 'pointer'
			graph.update(item, model)
			graph.paint()
		})

		setGraph(graph)
	}

	useEffect(() => {
		setGraphObj() // 初始化画布
	}, [])

	useEffect(() => {
		if (graph && data) {
			renderGraph() // 渲染画布
		}
	}, [data, graph])

	const renderGraph = () => {
		graph.clear() // 清除画布
		graph.data(data) // 传递数据
		graph.render() // 渲染画布
	}

	useEffect(() => {
		if (!editFlag && targetId) {
			const item = graph.findById(targetId)
			if (editValue) {
				graph.updateItem(
					item,
					{
						label: editValue,
					},
					true
				)
				setData(() => data)
			}
		}
	}, [editFlag, targetId, editValue])

	return (
		<div className={styles.projectRouteBox}>
			<div className={styles.title}>项目路线图</div>
			<div className={styles.testBox} id={'container'} />
		</div>
	)
}

export default ProjectRoute
